<template>
  <div
    v-loading="isLoading"
    class="panel-property"
  >
    <div class="content">
      <PanelLabelOverflowTooltip
        ref="panelLabelOverflowTooltip"
        :component-style="form.componentStyle"
      />
      <el-form
        ref="form"
        v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
        class="prop-form"
        label-position="right"
        :model="form"
        :rules="rules"
        label-width="30%"
      >
        <BaseOption
          :form="form"
          option="tooltipHasLabel"
          :widget-instance-id="widgetInstanceId"
          :config="config"
          type="echart"
        />
        <BaseOption
          :form="form"
          option="componentStyle"
          @change="componentStyleChanged"
        />
        <BaseOption
          :form="form"
          option="color"
          :config="config"
          :color-group="colorGroup"
        />
        <OptionCollapse>
          <el-collapse-item
            :title="$demoi18n('panel.label.titleStyle')"
            name="cssStyle.title"
          >
            <BaseOption
              :form="form"
              option="title"
            />
            <BaseOption
              :form="form"
              option="cssStyle.title"
              :df-css-style-attrs="dfCssStyleAttrs.title"
            />
            <BaseOption :form="form" option="isTitleSignVisiable" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="signMarginLeft" />
            <BaseOption v-if="form.isTitleSignVisiable" :form="form" option="verticalLineBackgroundColor" />
          </el-collapse-item>
        </OptionCollapse>
        <BaseOption
          :form="form"
          option="echart"
          :echart-conf="getEchartConf()"
        />
      </el-form>
    </div>
    <PanelPropertyBottom :config="config" :widgetInstanceId="widgetInstanceId" :form="form" />
  </div>
</template>
<script>
import ColorPopover from '@/components/color-popover/colorPopover';
import OptionCollapse from '@/components/common/base-option/option-collapse/option-collapse.vue';
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import panelPropertyBase from '@/mixin/panel-property-base.js';
import BaseOption from '../../common/base-option/base-option.vue';
import colorGroup from './colorGroup.js';

export default {
  name: 'PanelProperty',
  components: {
    ColorPopover,
    BaseOption,
    OptionCollapse,
    PanelLabelOverflowTooltip,
  },
  mixins: [panelPropertyBase],
  props: ['config', 'widgetInstanceId', 'widget'],
  data() {
    return {
      activeColorRadio: '#2D8CF0', // 单选框选中时的颜色
      colorOptions: ['color1', 'color2', 'color3', 'color4', 'color5', 'color6'],
      colorGroup: colorGroup,
      isLoading: false,
      form: {
        title: '',
        y0AxisName: '',
        y1AxisName: '',
        barNum: 6,
        lineType: 'fillet',
        legend: true,
        y0LegendName: '',
        y1LegendName: '',
        componentStyle: window._adoPremise.uc.theme,
        padding: {
          left: 50,
          bottom: 40,
          right: 50,
        },
        size: {
          width: '',
          height: '',
        },
        position: {
          x: '',
          y: '',
        },
        color: 'color1',
      },
      dfCssStyleAttrs: {},
    };
  },
  computed: {},
  watch: {},
  created() {
    // 读取配置
    if (this.config) {
      this.form = JSON.parse(JSON.stringify(this.config.config.property));
      this.dfCssStyleAttrs = this.initDfCssStyleAttrs();
    }
  },
  mounted() {
    this.setLabelTitle();
  },
  methods: {
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },
    componentStyleChanged() {
      this.initTitleColor();
    },
    setLabelTitle() {
      const dropdownList = document.querySelectorAll('.prop-form');
      dropdownList.forEach(item => {
        const options = item.querySelectorAll('.el-form-item__label');
        options.forEach(element => {
          element.setAttribute('title', element.innerText);
        });
      });
    },
    getEchartConf() {
      return {
        _componentName: 'biaxial-line-bar',
        yAxis: [
          { _tabName: this.$demoi18n('panel.leftAxis') },
          { _tabName: this.$demoi18n('panel.rightAxis'), position: 'right' },
        ],
        dfVals: this.getEchartDfVals({
          'echart.grid.left': 'padding.left',
          'echart.grid.bottom': 'padding.bottom',
          'echart.grid.right': 'padding.right',
          'echart.xAxis.name': 'xAxisName',
          'echart.yAxis.0.name': 'y0AxisName',
          'echart.yAxis.1.name': 'y1AxisName',
          'echart.xAxis.axisLabel.rotate': 'xLabelRotate',
          'echart.dataZoom.slider.show': 'barShow',
          'echart.dataZoom.slider._barNum': 'barNum',
          'echart.series.barWidth': 'barWidth',
          'echart.series._emptyName': 'emptyDisp',
        }),
      };
    },
  },
};
</script>

<style lang="less" scoped>
@import '../../common/less/panel-property.less';
</style>
<style lang="less" scoped>
.panel-property {
  .content {
    .prop-form {
      padding: 0 10px;

      .slider-number-left {
        vertical-align: text-bottom;
        padding-right: 20px;
      }
      .slider-number-right {
        vertical-align: text-bottom;
        padding-left: 20px;
      }

      :deep(.el-slider) {
        display: inline-block;
        width: 120px;
      }

      :deep(.el-form-item) {
        margin-bottom: 0;
        .el-form-item__label {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
      .input-number {
        width: 80px;
        :deep(.el-input-number__decrease) {
          width: 19px;
          background-color: #fff;
        }
        :deep(.el-input-number__increase) {
          width: 19px;
          background-color: #fff;
        }
        :deep(.el-input__inner) {
          padding-left: 19px;
          padding-right: 19px;
        }
      }
      .input-number-left {
        margin-right: 25px;
      }

      .color-radio-group {
        background-color: #eeeeee;
        :deep(.el-radio-button__inner) {
          display: inline-block;
          padding: 2px 2px;
          border: 0;
          border-radius: 0;
          height: 24px;
          margin: 2px 2px;
          background: #eeeeee;
        }
        :deep(.is-active) {
          .el-radio-button__inner {
            background-color: #409eff;
          }
        }
      }
    }
  }
}
</style>
